<template>
    <div class="register">
        <div class="top">
            <div class="title">{{ detailStore.hospitalData.hospital?.hosname }}</div>
            <div class="level">
                <img src="@/assets/赞.png" alt="">
                <span>{{ detailStore.hospitalData.hospital?.hostype}}</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <img :src="'data:image/jpeg;base64,'+detailStore.hospitalData.hospital?.logoData" alt="">
            </div>
            <div class="right">
                <div class="registerRule"><h2>挂号规则</h2>
                    <div class="inline">
                        <span>预约周期：{{ detailStore.hospitalData.bookingRule?.cycle }}天</span>
                        <span>放号时间：{{ detailStore.hospitalData.bookingRule?.releaseTime }}</span>
                        <span>停挂时间：{{ detailStore.hospitalData.bookingRule?.stopTime }}</span>
                    </div>
                    <div class="inline">
                        <span>退号时间：就诊前一天工作日{{ detailStore.hospitalData.bookingRule?.quitTime }}前取消</span>
                    </div>
                </div>
                <div class="hospitalRule">
                    <h2>医院预约规则</h2>
                    <div class="inline" v-for="(item,index) in detailStore.hospitalData.bookingRule?.rule" :key="index">
                        {{  index+1 }}：{{ item }}
                    </div>
                </div>
            </div>
        </div>
        <div class="department">
            <div class="leftNav">
                <ul>
                    <li v-for="(department,index) in detailStore.departmentArr"
                        :key="department.depcode"
                        :class="{active:currentIndex==index}"
                        @click="changeIndex(index)"
                    >
                        {{  department.depname }}
                    </li>
                </ul>
            </div>
            <div class="departmentInfo">
                <!--  表示右侧一个大科室及其小科室 -->
                <div class="showDepartment"
                     v-for="department in detailStore.departmentArr"
                     :key="department.depcode"
                >   <!-- 大科室名-->
                    <h5 class="cur">{{department.depname}}</h5>
                    <!-- 小科室名-->
                    <ul>
                        <li v-for="child in department.children" :key="child.depcode" @click="showLogin(child)">
                            {{ child.depname }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Register">
    // 引入仓库
    import useDetailStore from "@/store/modules/hospitalDetail";
    import {ref} from "vue";
    // 获取仓库内容，主要是visible控制显示与隐藏
    import useUserStore from "@/store/modules/user";
    import {useRouter,useRoute} from "vue-router";

    let $router = useRouter();
    let $route = useRoute();
    let userStore = useUserStore();
    let detailStore = useDetailStore();
    let currentIndex = ref<number>(0);
    // 点击大科室事件
    const changeIndex = (index:number) =>{
        currentIndex.value = index;
        // 获取导航对应的科室
        let now = document.querySelectorAll('.cur')
        // 滚动到对应的科室
        now[currentIndex.value].scrollIntoView({
            behavior: "smooth",
            block: "start",
        });
    }
    // 点击科室事件
    const showLogin = (child:any) =>{
        // child表示科室的信息
        // 跳转到挂号页面
        $router.push({path:'/hospital/register_step1',query:{hoscode:$route.query.hoscode,depcode:child.depcode}})
    }
</script>

<style scoped>
    .register{
        margin: 10px 20px;
        .top{
            display: flex;
            .title{
                font-size: 20px;
                font-weight: 900;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            .level{
                margin-left: 20px;
                color: #7f7f7f;
                height: 40px;
                text-align: center;
                line-height: 40px;
                span{
                    margin-left: 5px;
                }
            }
        }
        .content{
            margin-top: 50px;
            margin-left: 30px;
            display: flex;
            .left{
                width: 80px;
                img{
                    width: 100%;
                }
            }
            .right{
                flex: 1;
                margin-left: 50px;
                h2{
                    color: rgb(51,51,51);
                    font-size: 16px;
                    margin-top: 0;
                }
                .inline{
                    color: #7f7f7f;
                    font-size: 12px;
                    margin-top: 10px;
                    span{
                        margin-right: 60px;
                    }
                }
                .hospitalRule{
                    margin-top: 20px;
                }
            }
        }
        .department{
            width: 100%;
            height: 500px;
            display: flex;
            margin-left: 30px;
            margin-top: 30px;
            .leftNav{
                width: 80px;
                ul{
                    list-style: none;
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgb(248,248,248);
                    display: flex;
                    flex-direction: column;
                    li{
                        flex: 1;
                        text-align: center;
                        color: #7f7f7f;
                        font-size: 14px;
                        line-height: 30px;
                        &.active{
                            border-left: 2px solid red;
                            background-color: white;
                            color: red;
                        }
                    }
                    li:hover{
                        cursor: pointer;
                    }
                }
            }
            .departmentInfo{
                flex: 1;
                margin-top: 20px;
                height: 100%;
                overflow: auto;
                &::-webkit-scrollbar{
                    display: none;
                }
                .showDepartment{
                    h5{
                        background-color: rgb(248,248,248);
                        font-weight: 0;
                        color: #7f7f7f;
                        margin: 5px 0;
                    }
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        list-style: none;
                        padding: 0;
                        margin-left: 20px;
                        li{
                            width: 33%;
                            color: #7f7f7f;
                            line-height: 30px;
                        }
                        li:hover{
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

</style>